<template>
	<view class="form-container">
		<view class="form-card">
			<view class="form-header">
				<text class="form-title">企业信息登记</text>
				<text class="form-desc">请填写企业法人信息</text>
			</view>

			<view class="form-body">
				<!-- 法人代表输入 -->
				<view class="form-item">
					<text class="form-label">法人代表</text>
					<uni-easyinput v-model="formData.clegalName" placeholder="请输入法人代表姓名" :inputBorder="false" class="custom-input" @blur="validateLegalName" />
					<view v-if="errors.clegalName" class="error-msg">{{ errors.clegalName }}</view>
				</view>

				<!-- 统一社会信用代码输入 -->
				<view class="form-item">
					<text class="form-label">统一社会信用代码</text>
					<uni-easyinput
						v-model="formData.clegalId"
						placeholder="请输入18位统一社会信用代码"
						:inputBorder="false"
						maxlength="18"
						class="custom-input"
						@blur="validateLegalId"
					/>
					<view v-if="errors.clegalId" class="error-msg">{{ errors.clegalId }}</view>
				</view>

				<!-- 提交按钮 -->
				<button type="primary" :class="{ disabled: !isFormValid }" :disabled="!isFormValid" @click="handleSubmit">提交信息</button>
			</view>
		</view>

		<!-- 提交成功提示 -->
		<uni-popup ref="successPopup" type="center" background-color="#fff">
			<view class="popup-content">
				<uni-icons type="checkmarkempty" color="#4cd964" size="60"></uni-icons>
				<text class="popup-title">提交成功</text>
				<text class="popup-desc">企业信息已成功提交</text>
				<button class="popup-btn" @click="closePopup">确定</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { saveCurrentComDetails } from '@/api/comDetailsApi.js';
export default {
	name: 'LegalForm',
	data() {
		return {
			formData: {
				clegalName: '杭州同源企业有限公司',
				clegalId: '112233445566778899'
			},
			errors: {
				clegalName: '',
				clegalId: ''
			}
		};
	},
	computed: {
		// 表单验证状态
		isFormValid() {
			return this.formData.clegalName && this.formData.clegalId && !this.errors.clegalName && !this.errors.clegalId;
		}
	},
	methods: {
		// 验证法人代表姓名
		validateLegalName() {
			if (!this.formData.clegalName) {
				this.errors.clegalName = '请输入法人代表姓名';
				return false;
			} else if (this.formData.clegalName.length < 2) {
				this.errors.clegalName = '法人代表姓名至少2个字符';
				return false;
			} else {
				this.errors.clegalName = '';
				return true;
			}
		},

		// 验证统一社会信用代码
		validateLegalId() {
			const legalId = this.formData.clegalId;

			if (!legalId) {
				this.errors.clegalId = '请输入统一社会信用代码';
				return false;
			} else if (legalId.length !== 18) {
				this.errors.clegalId = '统一社会信用代码必须是18位';
				return false;
			} else if (!/^[0-9A-Z]+$/.test(legalId)) {
				this.errors.clegalId = '统一社会信用代码只能包含数字和大写字母';
				return false;
			} else {
				this.errors.clegalId = '';
				return true;
			}
		},

		// 提交表单
		async handleSubmit() {
			// 提交前再次验证
			const isNameValid = this.validateLegalName();
			const isIdValid = this.validateLegalId();

			if (isNameValid && isIdValid) {
				console.log('提交的表单数据:', this.formData);

				// 模拟API调用
				uni.showLoading({
					title: '提交中...'
				});
				const res = await saveCurrentComDetails(this.formData)
				console.log(res);
				uni.hideLoading();
				this.$refs.successPopup.open();

			}
		},

		// 关闭成功提示
		closePopup() {
			this.$refs.successPopup.close();
			uni.switchTab({
				url:'/pages/center/center'
			})
			// 可选：重置表单
			// this.resetForm();
		},

		// 重置表单
		resetForm() {
			this.formData = {
				clegalName: '',
				clegalId: ''
			};
			this.errors = {
				clegalName: '',
				clegalId: ''
			};
		}
	}
};
</script>

<style lang="scss" scoped>
.form-container {
	padding: 30rpx;
	background-color: #f8f8f8;
	min-height: 100vh;
}

.form-card {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 40rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.form-header {
	margin-bottom: 50rpx;
	text-align: center;
}

.form-title {
	display: block;
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.form-desc {
	display: block;
	font-size: 26rpx;
	color: #999;
}

.form-item {
	margin-bottom: 40rpx;
}

.form-label {
	display: block;
	font-size: 30rpx;
	color: #333;
	margin-bottom: 20rpx;
	font-weight: 500;
}

.custom-input {
	background-color: #f8f8f8;
	border-radius: 12rpx;
	padding: 0 20rpx;
}

.error-msg {
	color: #e64340;
	font-size: 24rpx;
	margin-top: 10rpx;
}

.submit-btn {
	background-color: #007aff;
	color: #fff;
	border-radius: 50rpx;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
	margin-top: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 122, 255, 0.3);
}

.submit-btn.disabled {
	background-color: #c0c0c0;
	box-shadow: none;
}

.popup-content {
	padding: 60rpx 40rpx;
	text-align: center;
	width: 500rpx;
}

.popup-title {
	display: block;
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
	margin: 20rpx 0 10rpx;
}

.popup-desc {
	display: block;
	font-size: 28rpx;
	color: #666;
	margin-bottom: 40rpx;
}

.popup-btn {
	background-color: #007aff;
	color: #fff;
	border-radius: 50rpx;
	height: 80rpx;
	line-height: 80rpx;
	font-size: 30rpx;
}
</style>
